<style>
#s{
  border-bottom-style:solid;
  border-width:1px;
  border-bottom-color: #939598;
  font-size: 15px;
  padding-top: 20px;
  padding-left: 22px;
  padding-bottom: 20px;
}
#s1{

  background: #2361bf;
  padding-left:5px;
  margin-right: 30px;

}

#a1{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 700px;
  background: #FFFFFF;
}
#a2{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 300px;
  background: #FFFFFF;
}
#a3{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 100px;
  background: #FFFFFF;
}
.a3{
  float:right;
  padding: 30px;
}

.t{
  width: 700px;
  padding-left: 20px;
  padding-top: 10px;
}

</style>

<template>
  <div>
      <div id="a1">
        <p id="s"><span id="s1"></span>开票</p>
        <el-form ref="form" :model="form">
          <el-form-item label="订单状态">
            <el-select v-model="form.orderStatus" placeholder="请选择" clearable>
              <el-option label="全部" value="全部"></el-option>
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="待调度" value="待调度"></el-option>
              <el-option label="运输中" value="运输中"></el-option>
              <el-option label="已签收" value="已签收"></el-option>
              <el-option label="已拒绝" value="已拒绝"></el-option>
              <el-option label="已取消" value="已取消"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="submitForm">搜索</el-button>
          <el-button @click="fan">重置</el-button>
        </el-form>


        <el-table  :data="fapiaoList" >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="订单号" align="center" prop="orderNumber" />
          <el-table-column label="客户" align="center" prop="customerName" />
          <el-table-column label="发货时间" align="center" prop="startTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开票金额" align="center" prop="invoicingAmount" />
          <el-table-column label="还剩金额" align="center" prop="invoicingAmount" />
          <el-table-column label="结算状态" align="center" prop="settlementStatus" >
            <template slot-scope="scope">
              <span>{{scope.row.settlementStatus==0?'未结算':scope.row.settlementStatus==1?'已结算':'部分结算'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="结算时间" align="center" prop="settlementTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.settlementTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-button @click="fan">搜索</el-button>
          <el-button type="primary" @click="submitForm">重置</el-button>
        </el-table>

      </div>
      <div id="a2">
        <p id="s"><span id="s1"></span>备注</p>
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea2" class="t">
        </el-input>

      </div>
      <div id="a3">
        <div class="a3">
          <el-button @click="fan">取消</el-button>
          <el-button type="primary" @click="tiao">下一步</el-button>
        </div>
      </div>

  </div>

</template>



<script>
import {addFapiao, getFapiao, updateFapiao} from "@/api/fapiao/fapiao";

export default {
    data(){
      return{
       form:{},
        fapiaoList:[],
        queryParams:[]
      }
    },
    methods:{
      fan(){
        this.$router.push({path:"/fapiao"})
      },
      tiao(){
        this.$router.push({path:'/fa'})
      },
      // findpiao(){
      //   let ids = this.$route.query.ids;
      //   alert(ids)
      //   for (let i = 0; i < ids.length; i++) {
      //     getFapiao(ids).then(response => {
      //       this.fapiaoList = response.data;
      //     });
      //   }
      // },
     findpiao(){
        let ids = this.$route.query.ids;
        Promise.all(ids.map(id => getFapiao(id)))
          .then(responses => {
            this.fapiaoList=responses.map(response => response.data);
          })
          .catch(error => {
            console.error('获取发票错误',error);
          })
     },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateFapiao(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addFapiao(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
    },
    created() {
     this.findpiao();
    }
  }


</script>
